<template>
    <div class="recommend-list-box">
        <tv-list
            class="recommend-list"
            ref="recommendListRef"
            clipPadding="{ top: 30, left: 20, right: 20 }"
            @item-focused="focusSelectFun"
            @item-click="focusClickFun"
            clipChildren="false"
            clipToPadding="false"
            endHintEnabled="false"
            nextFocusName="{msgId:'recommendListFocus',left:'self',right:'self',down:'self',up:'self' }"
        >
            <tv-item
                :focusable="route.name === 'home' ? true : false"
                keyDelayTime="500"
                class="recommend-item"
                type="10"
                focusScale="1.03"
            >
                <div class="recommend-nav">
                    <image-view
                        duplicateParentState
                        class="recommend-img"
                        src="${contentImage}"
                    />
                    <div
                        class="recommend-img-box"
                        gradientBackground="${gradientBackground}"
                    ></div>
                </div>
            </tv-item>
            <tv-item
                :focusable="route.name === 'home' ? true : false"
                keyDelayTime="500"
                class="recommend-item"
                type="11"
                focusScale="1.03"
            >
                <div class="recommend-nav">
                    <image-view
                        duplicateParentState
                        class="recommend-img"
                        src="${contentImage}"
                    />
                    <div
                        class="recommend-img-box"
                        gradientBackground="${gradientBackground}"
                    >
                        <div class="recommend-live-box">
                            <text-view
                                duplicateParentState
                                class="live-name"
                                text="${uuidValue}"
                            ></text-view>
                            <text-view
                                duplicateParentState
                                gravity="end"
                                class="live-tips"
                                text="点击【OK】键进入全屏"
                            ></text-view>
                        </div>
                    </div>
                    <div class="live-info-box">
                        <text-view
                            duplicateParentState
                            class="live-title"
                            text="${phtvChineseInfo.programName}"
                        ></text-view>
                        <text-view
                            duplicateParentState
                            gravity="end"
                            class="live-time"
                            text="${phtvChineseInfo.startAndEndTime}"
                        ></text-view>
                    </div>
                </div>
            </tv-item>
        </tv-list>
    </div>
</template>
<script>
import atlas from "@/atlas";
export default {
    name: "HeadetBtn",
    props: ["route", "selectList", "phtvChineseInfo"],
    data() {
        return {
            recommendList: [
                {
                    title: "推荐",
                },
                {
                    title: "我家",
                },
                {
                    title: "社区",
                },
                {
                    title: "周边",
                },
            ],
            recommendFocusIndex: -1,
            gradientBackground: {
                type: 0,
                shape: 0,
                orientation: 0,
                colors: ["#00000000", "#80000000"],
                cornerRadii4: [12, 12, 12, 12],
            },
        };
    },
    mounted() {},
    methods: {
        updateBannerList(selectList) {
            let newList = [];
            for (let index = 0; index < selectList.length; index++) {
                const element = selectList[index];
                let info = {
                    ...element,
                    type: element.type === "11" ? element.type : "10",
                    gradientBackground: this.gradientBackground,
                    phtvChineseInfo: this.phtvChineseInfo || {},
                };
                if (element.type === "13") {
                    info = {
                        ...element.contents[0],
                        ...info
                    }
                }
                newList.push(info);
            }
            this.recommendList = newList;
            console.log("recommendList", this.phtvChineseInfo);
            this.$refs.recommendListRef.setListData(this.recommendList);
        },
        focusSelectFun(evt) {
            this.$emit("focusHistoryChange", "RecommendListWrap");
            let { position } = evt;
            this.recommendFocusIndex = position;
        },
        // 不要删掉，删掉触发不了上焦事件
        focusClickFun() {
            console.log("focusClickFun");
        },
        queryGradientBackground(index) {
            if (this.recommendFocusIndex === index) {
                return;
            } else if (this.recommendFocusIndex !== index) {
                return;
            }
            return;
        },
        compSetFocus(rowIndex) {
            let focusIndex =
                rowIndex > -1
                    ? rowIndex
                    : this.recommendFocusIndex > 0
                    ? this.recommendFocusIndex
                    : 0;
            this.$refs.recommendListRef.requestChildFocus(focusIndex);
        },
        phtvChineseInfoChange(phtvChineseInfo) {
            this.recommendList.forEach((item) => {
                if (item.type === "11") {
                    item.phtvChineseInfo = phtvChineseInfo;
                }
            });
            this.$refs.recommendListRef.setListData(this.recommendList);
        },
    },
};
</script>
<style lang="less" scoped>
.recommend-list-box {
    width: 1065px;
    height: 765px;
    background-color: transparent;
    z-index: 4;
    .recommend-list {
        width: 1065px;
        height: 765px;
        .recommend-item {
            position: relative;
            // 整体宽度
            width: 1024px;
            height: 679px;
            .recommend-nav {
                position: relative;
                .recommend-img-box {
                    position: absolute;
                    top: 4px;
                    left: 4px;
                    width: 1016px;
                    height: 571px;
                    background-color: transparent;
                    .recommend-live-box {
                        position: absolute;
                        left: 20px;
                        bottom: 15px;
                        // 1016-40
                        width: 976px;
                        height: 30px;
                        background-color: transparent;
                        flex-direction: row;
                        .live-name {
                            width: 488px;
                            height: 30px;
                            line-height: 30px;
                            font-size: 24px;
                            opacity: 0.6;
                            letter-spacing: 0px;
                            color: #ffffff;
                            font-weight: normal;
                        }
                        .live-tips {
                            width: 488px;
                            height: 30px;
                            line-height: 30px;
                            font-size: 24px;
                            opacity: 0.6;
                            letter-spacing: 0px;
                            color: #ffffff;
                            font-weight: normal;
                        }
                    }
                }
                .recommend-img {
                    width: 1024px;
                    height: 579px;
                    focus-border-color: #ffffff;
                    focus-border-width: 4px;
                    focus-border-radius: 12px;
                }
                .live-info-box {
                    margin-top: 26px;
                    margin-left: 20px;
                    // 1016-40
                    width: 976px;
                    height: 30px;
                    background-color: transparent;
                    flex-direction: row;
                    .live-title {
                        height: 30px;
                        line-height: 30px;
                        font-size: 24px;
                        letter-spacing: 0px;
                        color: #ffffff;
                        font-weight: 600;
                    }
                    .live-time {
                        width: 150px;
                        height: 30px;
                        line-height: 30px;
                        font-size: 24px;
                        letter-spacing: 0px;
                        color: #ffffff;
                        font-weight: 600;
                    }
                }
            }
        }
    }
}
</style>
